<script setup lang="ts">
import Option from './option.vue';
import type Node from 'element-plus/es/components/tree/src/model/node';

interface OptionType {
  id: number;
  name: string;
  parent: null | number;
  project: number;
  [key: string]: any;
}
interface TreeNode {
  id: number;
  name: string;
  project?: number;
  children?: OptionType[];
  [key: string]: any;
}
const props = withDefaults(defineProps<{
  type?: '曲线分组';
}>(), {
  type: '曲线分组',
});
const emits = defineEmits<{
  (event: 'all-change'): void;
  (event: 'current-change', data: TreeNode, node: Node): void;
  (event: 'optionlist-change', tree: OptionType[]): void;
}>();

const allChange = () => {
  emits('all-change');
}
const currentChange = (data: TreeNode, node: Node) => {
  emits('current-change', data, node);
}
const optionlistChange = (tree: OptionType[]) => {
  emits('optionlist-change', tree);
}
</script>

<template>
  <div class="option-card flex-column">
    <slot></slot>
    <Option
      :type="props.type"
      @all-change="allChange"
      @current-change="currentChange"
      @optionlist-change="optionlistChange"
    />
  </div>
</template>

<style lang="scss" scoped>
.option-card {
  width: 220px;
  height: calc(100% - 20px);
  background: #FFFFFF;
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.15);
  border-radius: 10px;
  margin: 10px;
  padding: 15px;
  position: relative;
}
</style>